<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>操作元素的属性</title>
</head>

<body>
  <button>操作属性</button>
  <div id="box" hello="world">div 标签</div>
  <input type="password"><br>


  <script>
    //获取元素
    var box = document.querySelector('div')
    var inp = document.querySelector('input')
    var btn = document.querySelector('button')
    //获取元素属性
    console.log(box)
    console.log(box.id)
    console.log(inp.type)
    //获取自定义属性
    var res = box.getAttribute('hello')
    console.log(res)

    //给按钮绑定点击事件
    btn.onclick = function () {
      //设置修改元素属性
      box.id = 'content'
      inp.type = 'checkbox'
      box.setAttribute('hello', '新来的')
      // 没有属性时为添加属性
      box.setAttribute('index', 2)

      //删除自定义属性
      // box.removeAttribute('hello')
    }
  </script>


  <!-- <script>
        //获取元素
        var box = document.querySelector('div')
        var btn = document.querySelector('button')
        //获取自定义属性
        var res = box.getAttribute('hello')
        console.log(res)
         //给按钮绑定点击事件
         btn.onclick = function () {
            //设置修改元素属性
        //    box.setAttribute('hello','新来的')
           box.removeAttribute('hello')
         } -->
  </script>
</body>

</html>